html,
body {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .clearfix::before,
  .clearfix::after {
    content: '';
    display: table;
    clear: both;
  }
  /* 主页 */
  #main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
  }

  .dandelion {
    position: absolute;
    bottom: -1rem;
    left: 6rem;
    pointer-events: none;
    width: 4rem;
    opacity: 0;
  }

  .dandelionloading {
    position: absolute;
    bottom: 4.5rem;
    left: 9rem;
    pointer-events: none;
    width: 9rem;
    opacity: 0;
  }

  .grass {
    position: absolute;
    bottom: 0;
    left: 10rem;
    pointer-events: none;
    width: 4rem;
    opacity: 0;
  }

  .grassp {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 2rem;
    width: 100%;
    background-image: url(../../images/img/grass.png);
    background-size: 20rem 2rem;
    pointer-events: none;
    opacity: 0.8;
  }

  /* 随机壁纸 */
  .random_change_bg_btn {
    position: absolute;
    width: 3rem;
    height: 3rem;
    left: 2.5rem;
    bottom: 1rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    &.open {
      width: 4rem;
      height: 4rem;
      left: 2rem;
    }

    div {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.2rem;
      height: 5rem;
      margin-left: -0.1rem;
      background-color: #383838;
      z-index: -1;
    }

    img {
      animation: rotate360 2s reverse infinite linear;
      width: 100%;

      &.open {
        animation: rotate360 0.6s reverse infinite linear;
      }
    }
  }

  /*桌面壁纸*/
  .page_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    opacity: 0.9;
    transition: background-image 0.5s ease-in-out, transform 0.5s ease-in-out,
      opacity 0.5s ease-in-out;
    z-index: 1;

    &.sce {
      opacity: 0.4;
      transform: scale(1.5);
    }
  }
  .page_bg_filter {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    transition: backdrop-filter 0.5s ease-in-out,
      -webkit-backdrop-filter 0.5s ease-in-out;
  }
  /* 壁纸 */
  .all_bg_wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    max-width: var(--max-width);
    background-color: var(--color10);
    box-shadow: 0 0 0.5rem var(--color5);
    .bg_footer {
      position: absolute;
      display: none;
      background-color: var(--bg-color-o2);
      bottom: 0;
      border-top: 1px solid var(--color9);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      width: 100%;
      z-index: 6;

      div {
        display: flex;
        flex-flow: row wrap;
        margin: 0 auto;
        width: 95%;
        max-width: var(--max-width);
        padding: 0.5rem 0;
        align-items: center;

        span {
          flex: none;
          font-size: 2.2rem;
          margin: 0.5rem 1rem;
          width: 2.5rem;
          text-align: center;
          line-height: 2.5rem;
          &:hover {
            transform: scale(1.2);
            color: var(--text-hover-color);
          }
        }

        button {
          flex: none;
        }
      }
    }

    .upload_bg,
    .b_close_btn {
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      font-size: 2rem;
      text-align: center;
      border-radius: 50%;
      box-shadow: 0 0 0.5rem var(--color5);
      background-color: var(--color9);
      position: absolute;
      top: 1rem;
      left: 2rem;
      z-index: 2;

      &:hover {
        color: var(--text-hover-color);
        background-color: var(--color8);
        transform: scale(1.2);
      }
    }

    .upload_bg {
      top: 1rem;
      left: 6rem;
    }

    .bg_list {
      position: relative;
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 6rem 0;

      .bg_item {
        float: left;
        position: relative;
        width: 23.75%;
        margin: 0 0 1rem 1%;
        height: 20rem;
        border-radius: 0.5rem;
        overflow: hidden;

        &:hover {
          box-shadow: 0 0 0.5rem var(--color5);
          opacity: 0.8;
          .menu_btn {
            transform: scale(1.2);
            color: var(--text-hover-color);
          }
        }

        @media (max-width: 800px) {
          & {
            width: 47%;
            margin: 0 0 1rem 2%;
            height: 40rem;
          }
        }

        .check_level {
          display: none;
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 2;
        }

        .menu_btn {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 2rem;
          width: 4rem;
          height: 4rem;
          line-height: 4rem;
          text-align: center;
          color: var(--icon-color);
          z-index: 1;
        }

        .bg_img {
          background-color: var(--color9);
          width: 100%;
          height: 100%;
          margin: 0;
          background-image: url('../../images/img/loading.svg');
          background-repeat: no-repeat;
          background-size: 20%;
          background-position: center;
          &.load {
            background-size: cover;
            background-color: transparent;
          }
        }
      }

      .bg_paging_box {
        float: left;
        width: 100%;
        margin: 3rem auto;
      }
    }
  }

  // 最小化盒子
  .minimize_box {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    overflow-y: auto;
    max-height: 30rem;
    border-radius: 0 0 0.5rem 0.5rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    &:hover {
      z-index: 99999;
      background-color: var(--bg-color-o1);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .iframe_tag {
      background-color: var(--bg-color-o3);
      float: left;
      margin: 0.5rem;
      max-width: 20rem;
      border-radius: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 0.5rem var(--color5);
      &.hide {
        animation: bounceIn 1s;
      }
      &:hover {
        background-color: var(--color10);
      }
      .close_btn {
        flex: none;
        padding: 0 1rem;
        line-height: 4rem;
        text-align: center;
        color: var(--icon-color);
        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }
      .title {
        flex: auto;
        overflow: hidden;
        white-space: nowrap;
        // text-overflow: ellipsis;
        padding: 0 0.5rem;
        line-height: 4rem;
      }
      .logo {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 80%;
        color: var(--icon-color);
        flex: none;
        font-size: 2.2rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        width: 3rem;
        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }
    }
  }

  /* 时钟 */
  .clock {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 200px;
    border: 4px solid #0fddd22e;
    font-size: 16px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgb(0 0 0 / 6%);
    ol,
    li,
    ul {
      list-style: none;
    }
    i {
      display: none;
      position: absolute;
      top: -30px;
      left: 83px;
      font-size: 30px;
      color: var(--icon-color);
      &:hover {
        color: var(--text-hover-color);
        transform: scale(1.2);
      }
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.548);
      & .time_container {
        z-index: 1;
        color: var(--text-hover-color);
      }
    }
    &:hover i {
      display: block;
    }
    /* 刻度 */
    .line-hour li,
    .line-min li {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: left center;
    }

    .line-hour li {
      width: 10px;
      height: 2px;
      background-color: #fff;
    }

    .line-min li {
      width: 5px;
      height: 2px;
      background-color: #1389a7;
    }

    /* 数字 */
    .number {
      position: absolute;
      height: 150px;
      width: 150px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 17px;
      color: #ffffff;

      li {
        position: absolute;
        transform: translate(-50%, -50%);
      }
    }

    /* 指针 */
    .pointer {
      position: absolute;
      height: 150px;
      width: 150px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      li.hour,
      li.min,
      li.sec {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(0, -50%);
        transform-origin: left center;
        border-radius: 20px;
      }

      li.hour {
        width: 50px;
        height: 2px;
        background-color: #0f6ce6;
      }

      li.min {
        width: 70px;
        height: 2px;
        background-color: #d114b2;
      }

      li.sec {
        width: 85px;
        height: 1px;
        background-color: #f50;
      }

      li.circle {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        background-color: #f50;
        border-radius: 50%;
        border: 1px solid #ccc;
      }
    }
    .time_container {
      display: flex;
      flex-flow: row;
      overflow: hidden;
      position: absolute;
      margin-left: 50%;
      font-size: 1.2em;
      transform: translateX(-50%);
      color: #ffffff;
      bottom: 40px;
      .time_section {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1ch;
      }
    }
  }

  // 右侧设置
  .user_logo_btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    &.alert {
      animation: breathe 2s ease-in-out infinite;
    }
    &:hover {
      transform: scale(1.2);
    }
  }

  .right_menu_mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .right_box {
      position: absolute;
      right: 1rem;
      transform-origin: top right;
      transform: translateX(100%);
      top: 6rem;
      border-radius: 0.6rem;
      transition: transform var(--speed-duration) var(--speed-timing),
        opacity var(--speed-duration) var(--speed-timing);
      width: 90%;
      max-width: 30rem;
      max-height: 80%;
      overflow-y: auto;
      background-color: var(--bg-color-o2);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1rem solid transparent;
      opacity: 0;
      box-shadow: 0 0 0.5rem var(--color5);

      &.open {
        transform: none;
        opacity: 1;
      }

      span {
        margin-left: 1rem;
      }

      .user_name {
        width: 100%;
        overflow: hidden;
        color: var(--icon-color);
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 4rem;
        text-align: center;
        font-size: 2rem;

        &:hover {
          color: var(--text-hover-color);
          text-decoration: var(--text-hover-decoration);
        }
      }

      .r_list {
        padding: 1rem 0.4rem 0 0;

        div {
          display: flex;
          align-items: center;
          width: 100%;
          line-height: 2rem;
          padding: 1rem;
          margin-bottom: 0.3rem;
          border-radius: 0.5rem;
          background-color: var(--bg-color-o1);

          &:hover {
            color: var(--text-hover-color);
            background-color: var(--bg-color-o2);
            i {
              transform: scale(1.2);
            }
          }

          i {
            display: inline-block;
            font-size: 2rem;
            color: var(--icon-color);
            width: 2.6rem;
            height: 2.6rem;
            line-height: 2.6rem;
            text-align: center;
          }
        }
      }
    }
  }

  // 个人信息
  .user_info_wrap {
    display: none;
    position: fixed;
    width: 90%;
    max-width: 50rem;
    background-color: var(--bg-color-o2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2rem 1rem 2rem 1rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem var(--color5);

    .u_close_btn {
      position: absolute;
      top: 1rem;
      left: 1rem;
      width: 3rem;
      line-height: 3rem;
      text-align: center;
      font-size: 2rem;

      &:hover {
        color: var(--text-hover-color);
        transform: scale(1.2);
      }
    }

    .top {
      position: absolute;
      top: 1rem;
      left: 4rem;
      width: 3rem;
      line-height: 3rem;
      text-align: center;
      font-size: 2rem;

      &:hover {
        color: var(--text-hover-color);
        transform: scale(1.2);
      }
    }
    @media (max-width: 800px) {
      .top {
        display: none;
      }
    }
    .user_logo {
      height: 8rem;
      text-align: center;
      margin-bottom: 1rem;

      div {
        display: inline-block;
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: transform 0.2s;

        &:hover {
          transform: scale(1.1);
          box-shadow: 0 0 0.5rem var(--color5);
        }
      }
    }

    .user_list {
      ol,
      li,
      ul {
        list-style: none;
      }
      ul {
        line-height: 4rem;
        height: 4rem;
        background-color: var(--bg-color-o1);
        margin-bottom: 0.1rem;
        display: flex;
        flex-flow: row;

        li {
          &:nth-child(3),
          &:nth-child(1) {
            flex: none;
            width: 7rem;
            text-align: center;
            color: var(--color4);
          }

          &:nth-child(3):hover {
            color: var(--text-hover-color);
          }

          &:nth-child(2) {
            flex: auto;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
    }
  }

  // 系统信息
  .sys_info_wrap {
    display: none;
    position: fixed;
    width: 90%;
    max-width: 35rem;
    background-color: var(--bg-color-o2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4rem 0 2rem 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem var(--color5);

    .c_close_btn {
      position: absolute;
      top: 1rem;
      left: 1rem;
      width: 3rem;
      line-height: 3rem;
      text-align: center;
      font-size: 2rem;

      &:hover {
        color: var(--text-hover-color);
        transform: scale(1.2);
      }
    }
    .top {
      position: absolute;
      top: 1rem;
      left: 4rem;
      width: 3rem;
      line-height: 3rem;
      text-align: center;
      font-size: 2rem;

      &:hover {
        color: var(--text-hover-color);
        transform: scale(1.2);
      }
    }
    @media (max-width: 800px) {
      .top {
        display: none;
      }
    }
    .list {
      display: flex;
      width: 100%;
      flex-flow: row wrap;
      justify-content: space-evenly;

      .cpu,
      .mem,
      .swap,
      .disk {
        min-width: 15rem;
        width: 50%;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        .text {
          margin: 1rem 0;
          text-align: center;
          font-size: 1.4rem;
        }
        .progress {
          width: 65%;
          font-size: 1.6em;
        }
      }
    }
  }

  // 聊天室
  .show_chat_room_btn {
    position: absolute;
    bottom: 2rem;
    right: 2.5rem;
    font-size: 4rem;
    color: #49a923;
    animation: shakeY 20s infinite;

    &.run {
      font-size: 6rem;
      animation: tada 2s ease-in-out infinite;
    }
    &:hover {
      animation: none;
      color: var(--text-hover-color);
      transform: scale(1.2);
    }
  }

  .chat_room_wrap {
    max-height: 100%;
    display: none;
    position: fixed;
    overflow: hidden;
    border-radius: 0.5rem;
    padding: 0.2rem;
    background-color: var(--color9);
    box-shadow: 0 0 0.5rem var(--color5);

    .chat_room_box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;

      .date_search {
        position: absolute;
        top: 5rem;
        right: 1rem;
        z-index: 2;
        opacity: 0.9;
        display: flex;
        align-items: center;
        padding: 0.4rem;
        border-radius: 0.6rem;
        &:hover {
          opacity: 1;
        }
        &.active {
          background-color: var(--color9);
          & .date_close {
            display: block;
          }
          & .date_text {
            display: block;
          }
          & .date_icon {
            font-size: 1.8rem;
          }
        }
        .date_close,
        .date_icon {
          flex: none;
          width: 3rem;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          font-size: 1.8rem;
          color: var(--icon-color);
          &:hover {
            color: var(--text-hover-color);
            transform: scale(1.2);
          }
        }
        .date_icon {
          font-size: 3rem;
        }
        .date_close {
          display: none;
        }
        .date_text {
          display: none;
          flex: auto;
          word-break: break-all;
          line-height: 3rem;
          font-size: 1.4rem;
        }
      }
      // 用户列表
      .user_list_wrap {
        display: none;
        position: absolute;
        top: 4.3rem;
        left: 0;
        width: 100%;
        height: 100%;
        padding-bottom: 4.3rem;
        z-index: 3;
        .user_list_box {
          margin: 0 auto;
          height: 70%;
          max-width: var(--max-width);
          overflow-y: auto;
          border-radius: 0 0 0.5rem 0.5rem;
          background-color: var(--color9);
          .user_list_paging {
            span:hover {
              color: var(--text-hover-color);
            }
          }
          ol,
          li,
          ul {
            list-style: none;
          }
          .clear_msg {
            font-size: 1.4rem;
          }
          .user_item {
            display: flex;
            width: 100%;
            height: 5rem;
            line-height: 5rem;
            position: relative;
            padding: 0.5rem 1rem;
            &:not(:first-of-type) {
              border-top: 1px solid var(--color8);
            }

            &:hover {
              background-color: var(--color8);
              .user_logo {
                transform: scale(1.2);
              }
            }

            .msg_alert {
              display: none;
              position: absolute;
              width: 1rem;
              height: 1rem;
              background-color: var(--btn-danger-color);
              left: 0;
              top: 0;
              border-radius: 50%;
              animation: breathe 2s ease-in-out infinite;
              z-index: 2;

              &[x='n'] {
                display: block;
              }
            }

            .user_logo {
              flex: none;
              width: 4rem;
              height: 4rem;
              line-height: 4rem;
              text-align: center;
              overflow: hidden;
              border-radius: 0.5rem;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              background-color: var(--color5);
              &.load {
                background-color: transparent;
              }
              img {
                width: 100%;
                height: 100%;
                vertical-align: bottom;
              }
            }

            .user_name {
              flex: auto;
              height: 4rem;
              width: 0;
              display: flex;
              flex-flow: column;
              justify-content: center;
              span {
                width: 100%;
                padding-left: 1rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
              .name {
                line-height: 2.2rem;
              }
              .msg {
                line-height: 1.8rem;
                font-size: 1.4rem;
                color: var(--color4);
              }
              &:hover .name {
                color: var(--text-hover-color);
              }
            }
            .online {
              line-height: 4rem;
              flex: none;
              color: var(--icon-color);
              width: 3rem;
              text-align: center;
              font-size: 2rem;
              &:hover {
                transform: scale(1.2);
                color: var(--text-hover-color);
              }
            }
          }
          .paginationBox {
            height: auto;
            padding: 1rem 0;
            button {
              background-color: transparent;
              border: none;
              color: var(--color2);
            }
          }
        }
      }

      // 聊天室头部
      .c_head_btns {
        display: flex;
        align-items: center;
        width: 100%;
        flex: none;
        height: 4.1rem;
        position: relative;
        padding: 0 0.5rem;
        border-bottom: 1px solid var(--color8);
        background-color: var(--color9);
        z-index: 1;

        & > div {
          margin: 0 0.5rem;
        }
        .top,
        .search_btn,
        .c_close_btn,
        .ndn_icon,
        .clear_msg_btn {
          flex: none;
          width: 3rem;
          height: 4rem;
          line-height: 4rem;
          font-size: 2rem;
          text-align: center;

          &:hover {
            color: var(--text-hover-color);
            transform: scale(1.2);
          }
        }
        @media (max-width: 800px) {
          .top {
            display: none;
          }
        }
        .search_msg_inp {
          flex: auto;
          display: none;
          align-items: center;
          margin: 0 0.5rem;
          max-width: 30rem;
          min-width: 10rem;
          width: 0;
          background-color: var(--bg-color-o2);
          height: 3rem;
          line-height: 3rem;
          border-radius: 0.2rem;

          &.focus {
            background-color: var(--color10);
          }

          input {
            flex: auto;
            border: none;
            outline: 0;
            font-size: 1.4rem;
            width: 0;
            padding-left: 0.5rem;
            background-color: transparent;
          }

          i {
            display: none;
            flex: none;
            font-size: 1em;
            padding: 0 0.4rem;
          }
          .inp_search_btn {
            display: block;
          }
        }
        .title_wrap {
          margin: 0;
          flex: auto;
          display: flex;
          .online_status {
            display: none;
            width: 2rem;
            height: 4rem;
            line-height: 4rem;
            text-align: center;
            font-size: 1.8rem;
            padding-right: 0.4rem;
            color: var(--color6);

            &.active {
              color: #49a923;
            }
            &:hover {
              transform: scale(1.2);
            }
          }
          .chat_title {
            flex: auto;
            width: 0;
            height: 4rem;
            line-height: 4rem;
            font-weight: bold;
            font-size: 2rem;
            overflow: hidden;
            .text_box {
              float: left;
              white-space: nowrap;
            }
          }
        }

        .chat_home_btn {
          position: relative;
          flex: none;
          width: 3rem;
          height: 4rem;
          color: rgb(73 169 35);
          line-height: 4rem;
          text-align: center;
          font-size: 2.7rem;

          &:hover {
            color: var(--text-hover-color);
            transform: scale(1.2);
          }

          .c_home_msg_alert {
            display: none;
            width: 0.7rem;
            height: 0.7rem;
            position: absolute;
            top: 0.9rem;
            background: var(--btn-danger-color);
            border-radius: 50%;
            right: 0.5rem;
            animation: breathe 2s ease-in-out infinite;
          }
        }

        .c_user_btn {
          width: 3rem;
          height: 4rem;
          text-align: center;
          line-height: 4rem;
          font-size: 2.3rem;
          position: relative;
          text-align: center;

          &:hover {
            color: var(--text-hover-color);
            transform: scale(1.2);
          }

          .c_msg_alert {
            display: none;
            width: 0.7rem;
            height: 0.7rem;
            position: absolute;
            top: 0.9rem;
            background: var(--btn-danger-color);
            border-radius: 50%;
            right: 0.5rem;
            animation: breathe 2s ease-in-out infinite;
          }
        }
      }
      // 消息列表
      .chat_list_box {
        position: relative;
        width: 100%;
        flex: 1 1 auto;
        padding: 1rem;
        background-color: var(--color10);
        overflow-y: auto;
        background-image: url(../../images/img/chat-bg.png);
        background-size: 23rem 50rem;

        .chat_list {
          margin: 0 auto;
          max-width: var(--max-width);
          ol,
          li,
          ul {
            list-style: none;
          }
          .chat_item {
            .head {
              .chat_time {
                text-align: center;
                color: var(--icon-color);
                font-size: 1.4rem;
                padding-top: 1rem;
              }
            }
            .msg_info_wrap {
              display: flex;
              flex-flow: row;
              overflow: hidden;
              &:hover {
                .chat_menu_btn {
                  opacity: 1;
                }
              }
              .chat_menu_btn {
                flex: none;
                width: 2rem;
                height: 3rem;
                line-height: 3rem;
                text-align: center;
                font-size: 1.8rem;
                color: var(--color5);
                margin-top: 2.4rem;
                &:hover {
                  color: var(--text-hover-color);
                  transform: scale(1.2);
                }
              }
              @media (min-width: 801px) {
                .chat_menu_btn {
                  opacity: 0;
                }
              }
              .c_left_logo {
                flex: none;
                text-align: left;
                width: 4.2rem;
                height: 4rem;
                padding: 0.8rem 0;
              }

              .c_left_logo .c_logo {
                width: 4rem;
                height: 4rem;
                border-radius: 0.6rem;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-color: var(--color5);
                &.load {
                  background-color: transparent;
                }
              }

              .c_content_box {
                flex: auto;
                padding: 0.8rem 1rem;
                width: 0;

                .c_user_name {
                  display: block;
                  width: 100%;
                  font-size: 1.2rem;
                  word-break: break-all;
                  margin-bottom: 0.5rem;

                  span {
                    display: inline-block;
                    color: var(--icon-color);
                    padding: 0 0.4rem;
                  }
                }

                .c_file_msg_box {
                  position: relative;
                  padding: 1rem;
                  width: 100%;
                  max-width: 30rem;
                  height: 7rem;
                  background-color: var(--color8);
                  display: flex;

                  .c_file_info {
                    flex: auto;
                    width: 0;
                    height: 100%;

                    span {
                      display: block;
                      color: var(--color2);
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }

                    .file_name {
                      width: 100%;
                      height: 3rem;
                      line-height: 3rem;
                    }

                    .file_size {
                      width: 100%;
                      height: 2rem;
                      line-height: 2rem;
                      font-size: 1.4rem;
                    }
                  }

                  .file_type {
                    float: left;
                    width: 5rem;
                    height: 5rem;
                    font-size: 4rem;
                    line-height: 5rem;
                    text-align: center;
                  }
                }

                .c_img_msg_box {
                  position: relative;
                  width: 100%;
                  max-width: 20rem;
                  height: 20rem;
                  border-radius: 0.6rem;
                  overflow: hidden;

                  .c_img {
                    width: 100%;
                    height: 100%;
                    background-color: var(--color8);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-image: url('../../images/img/loading.svg');
                    background-size: 30%;
                    &.load {
                      background-color: transparent;
                      background-size: cover;
                    }
                    span {
                      position: absolute;
                      bottom: 1rem;
                      right: 1rem;
                      color: rgb(209 133 20);
                    }
                  }
                }

                .c_voice_msg_box {
                  position: relative;
                  max-width: 100%;
                  min-width: 8rem;
                  padding: 1rem;
                  background-color: var(--color8);

                  i {
                    font-size: 2rem;
                    color: var(--icon-color);
                  }
                }

                .c_text_msg_box {
                  position: relative;
                  padding: 1rem;
                  margin: 0;
                  white-space: pre-wrap;
                  word-break: break-word;
                  background-color: var(--color8);
                  line-height: 1.5;
                  font-size: 1.6rem;
                }

                .c_triangle {
                  position: absolute;
                  top: 0;
                  border: 0.6rem solid var(--color8);
                  border-color: transparent;
                  border-top-color: var(--color8);
                }
              }
            }
            &.left {
              .c_content_box {
                .c_user_name,
                .c_voice_msg_box {
                  text-align: left;
                }
                .c_img_msg_box,
                .c_voice_msg_box,
                .c_file_msg_box,
                .c_text_msg_box {
                  float: left;
                }
                .c_file_msg_box,
                .c_voice_msg_box,
                .c_text_msg_box {
                  border-radius: 0 0.6rem 0.6rem 0.6rem;
                }
                .c_triangle {
                  left: -0.5rem;
                }
              }
            }
            &.right {
              .c_left_logo {
                display: none;
              }
              .c_content_box {
                .c_user_name,
                .c_voice_msg_box {
                  text-align: right;
                }
                .c_img_msg_box,
                .c_voice_msg_box,
                .c_file_msg_box,
                .c_text_msg_box {
                  float: right;
                }
                .c_file_msg_box,
                .c_voice_msg_box,
                .c_text_msg_box {
                  border-radius: 0.6rem 0 0.6rem 0.6rem;
                }
                .c_voice_msg_box,
                .c_text_msg_box {
                  background-color: #91e5b8;
                  color: rgb(44, 61, 73);
                }
                .c_triangle {
                  right: -0.5rem;
                  border-top-color: #91e5b8;
                }
                .c_file_msg_box {
                  .c_triangle {
                    border-top-color: var(--color8);
                  }
                }
              }
            }
          }
        }
      }
      .chat_foot_wrap {
        width: 100%;
        flex: none;
        border-top: 1px solid var(--color8);

        .chat_foot_box {
          position: relative;
          margin: 0 auto;
          max-width: var(--max-width);
          display: flex;
          flex-flow: row;
          align-items: flex-end;
          background-color: var(--color9);
          z-index: 1;
          // 回到底部
          .scroll_to_bot_btn {
            display: none;
            position: absolute;
            width: 3rem;
            height: 3rem;
            line-height: 3rem;
            text-align: center;
            top: -4rem;
            left: 50%;
            margin-left: -1.5rem;
            z-index: 2;
            background-color: var(--color9);
            border-radius: 50%;
            font-size: 1.6rem;
            box-shadow: 0 0 0.5rem var(--color5);
            opacity: 0.9;
            &:hover {
              opacity: 1;
              color: var(--text-hover-color);
              transform: scale(1.2);
            }
          }
          .c_text_msg_box {
            flex: auto;
            position: relative;
            margin: 0.5rem;
            font-size: 1.6rem;
            .c_text_msg {
              position: relative;
              line-height: 1.5;
              .clean {
                display: none;
                position: absolute;
                bottom: 0;
                right: 0;
                width: 3rem;
                height: 3rem;
                font-size: 2rem;
                line-height: 3rem;
                text-align: center;
                font-size: 1.1em;
                z-index: 5;
                &:hover {
                  color: var(--text-hover-color);
                  transform: scale(1.2);
                }
                &.show {
                  display: block;
                }
              }
              .c_text_content {
                border-radius: 0.2rem;
                background-color: var(--bg-color-o2);
                position: absolute;
                width: 100%;
                height: 100%;
                white-space: pre-wrap;
                word-break: break-word;
                left: 0;
                top: 0;
                outline: none;
                border: none;
                padding: 1rem 1rem 3rem 1rem;
                font-size: inherit;
                line-height: inherit;
                font-family: inherit;
                resize: none;
                margin: 0;
                &.focus {
                  background-color: var(--color10);
                }
              }
              .fill_height {
                max-height: 25rem;
                min-height: 7rem;
                padding: 1rem 1rem 3rem 1rem;
                visibility: hidden;
                width: 100%;
                white-space: pre-wrap;
                word-break: break-word;
              }
            }

            .c_get_voice_btn {
              display: none;
              width: 100%;
              height: 100%;
              background-color: var(--color10);
              text-align: center;
              line-height: 4rem;

              &.gren {
                background-color: rgb(37, 201, 124);
                color: var(--color2);
                font-size: 2rem;
              }
            }
          }

          .c_sent_msg_btn,
          .c_sent_shake_btn,
          .c_change_btn {
            flex: none;
            font-size: 2rem;
            text-align: center;
            line-height: 5rem;
            width: 5rem;
            height: 5rem;

            &:hover {
              color: var(--text-hover-color);
              transform: scale(1.2);
            }
          }
          .c_sent_shake_btn {
            display: none;
          }
          .c_sent_msg_btn i {
            font-size: 2.8rem;
          }
          .c_sent_shake_btn i {
            font-size: 2.8rem;
          }
          .c_change_btn i {
            font-size: 2.5rem;
          }
        }
      }
    }
  }

  // 侧边栏
  .aside_btn {
    position: absolute;
    top: 2.5rem;
    left: 1.5rem;
    font-size: 4rem;
    font-weight: bold;
    color: var(--icon-color);
    padding: 0.5rem;
    animation: rotate360 6s infinite alternate;
    &:hover {
      animation: none;
      color: var(--text-hover-color);
      transform: scale(1.2);
    }
  }

  .aside_wrap {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    &.open {
      .aside {
        transform: none;
      }
    }
    .aside {
      display: flex;
      flex-flow: column;
      position: relative;
      transform: translateX(-100%);
      transition: transform var(--speed-duration) var(--speed-timing);
      width: 80%;
      max-width: 60rem;
      height: 100%;
      background-color: var(--bg-color-o2);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      overflow: hidden;
      .list {
        position: relative;
        flex: auto;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

        .list_title {
          position: relative;
          display: flex;
          align-items: center;
          margin-top: 1rem;
          font-size: 2rem;
          height: 5rem;

          &:hover {
            background-color: var(--bg-color-o2);
            .em {
              color: var(--text-hover-color);
            }
            i {
              transform: scale(1.2);
            }
          }
          .check_bmlist {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
          }
          em {
            flex: auto;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            line-height: 5rem;
          }

          i {
            flex: none;
            display: inline-block;
            width: 5rem;
            line-height: 5rem;
            text-align: center;
            font-size: 2rem;
            color: var(--color4);
            &.active {
              color: var(--btn-danger-color);
            }
          }
        }
        ol,
        li,
        ul {
          list-style: none;
        }
        ul {
          overflow: hidden;

          .bm_item {
            position: relative;
            width: 30.6%;
            float: left;
            font-size: 1.6rem;
            height: 12rem;
            margin: 0.5rem 0 0.5rem 2%;
            border-radius: 0.5rem;
            border: 1px solid var(--color9);
            background-color: var(--bg-color-o1);
            overflow: hidden;

            @media (max-width: 800px) {
              & {
                width: 47%;
              }
            }

            .check_bm {
              display: none;
              border-radius: 0.5rem;
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: 5;
            }

            &:hover {
              background-color: var(--bg-color-o2);
              color: var(--text-hover-color);
              .bm_logo {
                transform: scale(1.2);
              }
            }

            .bm_logo {
              position: absolute;
              top: 0.5rem;
              left: 0;
              margin-left: 0.5rem;
              border-radius: 0.5rem;
              width: 4rem;
              height: 4rem;
              background-repeat: no-repeat;
              background-position: center;
              background-image: url('../../images/img/loading.svg');
              background-size: 50%;
              &.load {
                background-size: cover;
              }
            }

            .bm_name {
              height: 5rem;
              line-height: 5rem;
              padding-left: 5rem;
              font-size: 2rem;
              text-decoration: none;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              border-bottom: 1px solid var(--color9);
            }

            p {
              color: var(--color4);
              font-size: 1.4rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              line-height: 1.5;
              margin: 0.4rem;
              word-break: break-all;
            }
          }
          .paginationBox {
            padding: 1rem 0;
            button {
              background-color: transparent;
              border: none;
              color: var(--color2);
            }
          }
        }

        .add_list_btn {
          float: right;
          font-size: 3rem;
          margin: 1rem 1.5rem 10rem 0;
          color: var(--icon-color);

          &:hover {
            color: var(--text-hover-color);
            transform: scale(1.2);
          }
        }
      }

      .foot_menu {
        display: none;
        flex: none;
        width: 100%;
        padding: 0.5rem 0;
        background-color: var(--bg-color-o4);
        z-index: 5;
        .flex_wrap {
          width: 100%;
          display: flex;
          flex-flow: row wrap;
          align-items: center;
          div {
            flex: none;
            font-size: 2rem;
            margin: 0.5rem 0.5rem 0.5rem 1rem;
            text-align: center;
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            &:hover {
              transform: scale(1.2);
              color: var(--text-hover-color);
            }
          }
          .clock_bm,
          .open_bm {
            display: none;
          }
          button {
            flex: none;
          }
          &.liststate {
            .move_bm {
              display: none;
            }
            .clock_bm,
            .open_bm {
              display: block;
            }
          }
        }
      }
    }
  }

  // 搜索盒子
  .search_box_btn {
    display: none;
    width: 10rem;
    height: 10rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5rem 0 0 -5rem;
    background-color: var(--color10);
    border-radius: 50%;
    animation: rubberBand 5s ease-in-out infinite;
    opacity: 0.9;
    &:hover {
      opacity: 1;
      animation: none;
    }
  }

  .search_box_mask {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .search_box_wrap {
      width: 80%;
      height: 80%;
      max-height: 100rem;
      max-width: var(--max-width);
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -30%);
      background-color: var(--bg-color-o2);
      border-radius: 1rem;
      box-shadow: 0 0 0.5rem var(--color5);
      padding: 1rem 0;
      display: flex;
      flex-flow: column;
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        width: 100%;
        height: 100%;
        border-radius: 10rem;
        z-index: -1;
      }
      @media (max-width: 800px) {
        &,
        .bg {
          width: 100%;
          border-radius: 0;
        }
      }

      .setting {
        position: absolute;
        top: 0rem;
        left: 0rem;
        font-size: 3rem;
        line-height: 5rem;
        text-align: center;
        width: 5rem;
        color: var(--color4);
        height: 5rem;

        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }

      .search_logo {
        margin: 0 auto;
        flex: none;

        .logo_box {
          width: 0rem;
          height: 8.8rem;
          margin: 0 auto;
          overflow: hidden;

          &.active {
            animation: logowidth 1s ease-in-out alternate both;
            -webkit-animation: logowidth 1s ease-in-out alternate both;
          }

          @media (max-width: 800px) {
            height: 7.6rem;

            &.active {
              animation: logowidth1 1s ease-in-out alternate both;
              -webkit-animation: logowidth1 1s ease-in-out alternate both;
            }
          }

          @keyframes logowidth {
            0% {
              width: 0;
            }

            100% {
              width: 22rem;
            }
          }

          @-webkit-keyframes logowidth {
            /*针对webkit内核*/
            0% {
              width: 0;
            }

            100% {
              width: 22rem;
            }
          }

          @keyframes logowidth1 {
            0% {
              width: 0;
            }

            100% {
              width: 19rem;
            }
          }

          @-webkit-keyframes logowidth1 {
            /*针对webkit内核*/
            0% {
              width: 0;
            }

            100% {
              width: 19rem;
            }
          }

          img {
            width: 22rem;
            height: 8.8rem;

            @media (max-width: 800px) {
              & {
                width: 19rem;
                height: 7.6rem;
              }
            }
          }
        }
      }

      .search_inp_wrap {
        flex: none;
        position: relative;
        width: 100%;
        height: 5rem;
        margin: 1rem auto;
        .content {
          position: relative;
          margin: 0 auto;
          width: 70%;
          background-color: var(--bg-color-o1);
          border-radius: 0.4rem 0rem 0.4rem 0.4rem;
          z-index: 6;
          &.active {
            background-color: var(--color10);
          }
          @media (max-width: 800px) {
            & {
              width: 90%;
            }
          }
          .search_box {
            height: 5rem;
            line-height: 5rem;
            display: flex;
            border-radius: 0.4rem;
            overflow: hidden;
            flex-flow: row;
            .logo {
              flex: none;
              height: 5rem;
              width: 5rem;
              display: flex;
              align-items: center;
              justify-content: center;
              &:hover {
                img {
                  width: 5rem;
                  height: 5rem;
                }
              }
              img {
                width: 4rem;
                height: 4rem;
                border-radius: 0.4rem;
              }
            }
            .inp_box {
              flex: auto;
              display: flex;
              align-items: center;

              input {
                padding: 0;
                flex: auto;
                width: 0;
                outline: none;
                font-size: 2rem;
                line-height: 1.5;
                background: transparent;
                border: none;
              }

              i {
                display: none;
              }
            }

            .search_submit,
            .translate_btn {
              display: none;
              flex: none;
              width: 4rem;
              text-align: center;
              font-size: 1.2em;
              font-family: Consolas, 'codeFont';

              &:hover {
                color: var(--text-hover-color);
                transform: scale(1.2);
              }
            }
          }
          .search_list_box {
            display: none;
            width: 100%;
            max-height: 40rem;
            overflow-y: auto;
            font-size: 1.8rem;
            border-radius: 0 0 0.4rem 0.4rem;
            ol,
            li,
            ul {
              list-style: none;
            }
            ul {
              position: relative;
              li {
                height: 4rem;
                line-height: 4rem;
                display: flex;
                align-items: center;
                border-top: 1px solid var(--color9);
                overflow: hidden;
                &:hover,
                &.active {
                  color: var(--text-hover-color);
                  background-color: var(--color9);
                  .type_logo {
                    transform: scale(1.2);
                  }
                }
                .text {
                  flex: auto;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .dellss {
                  flex: none;
                  width: 3.6rem;
                  height: 4rem;
                  font-size: 1.7rem;
                  text-align: center;

                  &:hover {
                    color: var(--btn-danger-color);
                    transform: scale(1.2);
                  }
                }

                .type_logo {
                  flex: none;
                  width: 3.6rem;
                  height: 4rem;
                  font-size: 1.6rem;
                  text-align: center;
                  color: var(--icon-color);
                }
              }
            }
          }
        }
      }

      .home_bm_wrap {
        position: relative;
        width: 80%;
        flex: auto;
        display: block;
        margin: 1rem auto auto auto;
        overflow-y: auto;

        @media (max-width: 800px) {
          & {
            width: 100%;
          }
        }
        ol,
        li,
        ul {
          list-style: none;
        }
        ul {
          padding: 0;

          .home_bm_item {
            position: relative;
            margin: 0.5rem 0.833%;
            float: left;
            width: 15%;
            text-align: center;

            @media (max-width: 800px) {
              & {
                width: 15%;
                margin: 0.5rem 5%;
              }
            }

            &:hover p {
              color: var(--text-hover-color);
            }

            &:hover .home_bm_logo {
              transform: scale(1.1);
              opacity: 1;
              box-shadow: var(--color5) 0 1.4rem 1.2rem -0.7rem;
            }

            .check_home_bm {
              display: none;
              position: absolute;
              top: 0;
              left: 50%;
              width: 100%;
              height: 100%;
              transform: translateX(-50%);
              text-align: left;
              z-index: 5;
            }

            .home_bm_logo {
              position: relative;
              top: 0;
              margin: 0 auto;
              width: 50%;
              padding-top: 50%;
              border-radius: 0.8rem;
              overflow: hidden;
              background-color: var(--bg-color-o1);
              opacity: 0.8;
              background-repeat: no-repeat;
              background-position: center;
              background-image: url('../../images/img/loading.svg');
              background-size: 40%;
              &.load {
                background-size: cover;
              }
              @media (max-width: 800px) {
                & {
                  width: 80%;
                  padding-top: 80%;
                }
              }
            }

            .home_bm_logo[x='add'] {
              background-size: cover;
              background-color: transparent;
            }
          }

          p {
            font-size: 1.4rem;
            line-height: 1.5;
            margin-top: 0.5rem;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:hover {
              text-decoration: var(--text-hover-decoration);
            }
          }
        }
      }

      .home_foot_menu {
        display: none;
        flex: none;
        width: 100%;
        padding: 0.5rem 0;
        background-color: var(--bg-color-o1);
        .flex_wrap {
          display: flex;
          width: 100%;
          align-items: center;
          flex-flow: row wrap;
          justify-content: center;
          div {
            flex: none;
            font-size: 2rem;
            margin: 0.5rem 1rem;
            width: 2.5rem;
            text-align: center;
            line-height: 2.5rem;
            height: 2.5rem;
            &:hover {
              transform: scale(1.2);
              color: var(--text-hover-color);
            }
          }

          button {
            flex: none;
          }
        }
      }
    }
  }

  // 迷你播放器
  .mini_player {
    display: none;
    position: fixed;
    bottom: 10rem;
    left: 10rem;
    height: 10rem;
    width: 10rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0.5rem var(--color5);
    border-radius: 0.5rem;
    background-color: var(--color7);
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #00000080;
      opacity: 0;
      pointer-events: none;
      border-radius: 0.5rem;
      transition: opacity 0.5s ease-in-out;
    }
    @media (min-width: 801px) {
      &:hover {
        .mask {
          opacity: 1;
        }
        .top,
        .next_btn,
        .show_lrc,
        .prev_btn,
        .to_max {
          display: block;
          text-shadow: 0 0 0.5rem #000;
        }
      }

      .play_btn {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 4rem;
        height: 4rem;
        font-size: 4rem;
        line-height: 4rem;
        margin: auto;
        text-align: center;
        color: #fff;

        &:hover {
          transform: scale(1.2);
          color: var(--text-hover-color);
        }

        @keyframes fontcolor {
          0% {
            color: #000000;
          }

          100% {
            color: #fff;
          }
        }
      }
      .top {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 2.2rem;
        color: #fff;

        &:hover {
          transform: scale(1.2);
          color: var(--text-hover-color);
        }
      }
      .to_max {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 2.5rem;
        color: #fff;

        &:hover {
          transform: scale(1.2);
          color: var(--text-hover-color);
        }
      }

      .show_lrc {
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 2.4rem;
        color: #fff;

        &:hover {
          transform: scale(1.2);
          color: var(--text-hover-color);
        }
      }

      .next_btn,
      .prev_btn {
        display: none;
        width: 4rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        color: #fff;
        font-size: 3rem;

        &:hover {
          font-size: 4rem;
          color: var(--text-hover-color);
        }
      }

      .next_btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -4rem;
      }

      .prev_btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -4rem;
      }
    }

    @media (max-width: 800px) {
      & {
        display: none;
      }
    }
  }

  /* 迷你歌词 */
  .mini_lrc_wrap {
    display: none;
    width: 70rem;
    font-size: 3rem;
    color: #a1a3a4;
    position: fixed;
    top: 10rem;
    left: 5rem;
    border: 1px dotted transparent;

    &:hover {
      border: 1px dotted #646464;
      backdrop-filter: blur(4px);
      background-color: var(--bg-color-o1);
      -webkit-backdrop-filter: blur(4px);
    }

    &:hover {
      .top,
      .close {
        display: block;
      }
    }

    .one,
    .tow {
      padding: 1rem;
      transition: color 0.3s ease-in-out, letter-spacing 0.3s ease-in-out;
      line-height: 1.5;

      &.open {
        color: rgb(25, 216, 222);
        letter-spacing: 1px;
      }
      .fy {
        color: #a1a3a4;
        letter-spacing: normal;
      }
    }

    .one {
      text-align: left;
    }

    .tow {
      text-align: right;
    }

    .close {
      display: none;
      width: 2rem;
      height: 2rem;
      position: absolute;
      top: -1rem;
      left: -1rem;
      line-height: 2rem;
      font-weight: bold;
      text-align: center;
      color: var(--color1);
      background-color: var(--color9);
      border-radius: 50%;
      font-size: 1.6rem;
      z-index: 1;

      &:hover {
        background-color: var(--color10);
        color: var(--text-hover-color);
        transform: scale(1.2);
      }
    }
    .top {
      display: none;
      width: 2rem;
      height: 2rem;
      position: absolute;
      top: -1rem;
      left: 1.6rem;
      line-height: 2rem;
      font-weight: bold;
      text-align: center;
      color: var(--color1);
      background-color: var(--color9);
      border-radius: 50%;
      font-size: 1.6rem;
      z-index: 1;

      &:hover {
        background-color: var(--color10);
        color: var(--text-hover-color);
        transform: scale(1.2);
      }
    }
  }

  // 音乐播放器盒子
  .music_player_box {
    max-height: 100%;
    display: none;
    position: fixed;
    overflow: hidden;
    background-color: var(--color9);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem var(--color5);
    padding: 0.2rem;

    // 底部进度条
    .music_foot_progress {
      height: 0.1rem;
      background-color: var(--icon-color);
      position: absolute;
      bottom: 5.1rem;
      left: 0;
      z-index: 10;
    }

    .content_wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      transform: translate(0, 0);
      overflow: hidden;

      // 背景
      .music_palyer_bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: var(--color9);
        z-index: -1;
        border-radius: 0 0 0.5rem 0.5rem;
        opacity: 0.2;
        transition: opacity 5s ease-in-out;
        &::after {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          z-index: -1;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }
      }

      // 头部
      .head_wrap {
        width: 100%;
        flex: none;
        height: 4.1rem;
        border-bottom: 1px solid var(--color8);
        display: flex;
        align-items: center;
        padding: 0 0.5rem;
        overflow: hidden;
        background-color: var(--color9);

        div {
          margin: 0 0.5rem;
        }
        .top,
        .close,
        .hide,
        .search_btn,
        .back,
        .volume {
          flex: none;
          width: 3rem;
          height: 4rem;
          line-height: 4rem;
          text-align: center;
          font-size: 2rem;

          &:hover {
            color: var(--text-hover-color);
            transform: scale(1.2);
          }
        }
        @media (max-width: 800px) {
          .top {
            display: none;
          }
        }
        .back {
          font-size: 1.8rem;
        }
        .hide {
          @media (max-width: 800px) {
            & {
              display: none;
            }
          }
        }

        .song_list_name {
          flex: auto;
          height: 4rem;
          line-height: 4rem;
          font-size: 1.4rem;
          overflow: hidden;
          white-space: nowrap;
          text-align: center;
          text-overflow: ellipsis;
          transition: opacity 0.3s ease-in-out;
          user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          opacity: 0;
        }

        .search_music_inp {
          flex: auto;
          display: none;
          max-width: 30rem;
          min-width: 10rem;
          width: 0;
          background-color: var(--bg-color-o2);
          height: 3rem;
          line-height: 3rem;
          border-radius: 0.2rem;
          align-items: center;

          &.focus {
            background-color: var(--color10);
          }

          input {
            flex: auto;
            width: 0;
            border: none;
            outline: none;
            background-color: transparent;
            font-size: 1.4rem;
            padding-left: 0.5rem;
          }

          i {
            display: none;
            flex: none;
            font-size: 1em;
            padding: 0 0.4rem;
          }
          .inp_search_btn {
            display: block;
          }
        }
      }

      // 中间
      .content_box {
        width: 100%;
        flex: auto;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        max-width: var(--max-width);

        // 歌单列表
        .song_list_wrap {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow-y: auto;
          transition: transform var(--speed-duration) var(--speed-timing);

          &.open {
            transform: translateX(-100%);
          }
          ol,
          li,
          ul {
            list-style: none;
          }
          ul {
            padding: 1rem 1rem 5rem 1rem;
            overflow: hidden;

            // 项
            .song_list_item {
              position: relative;
              width: 20%;
              float: left;
              margin-bottom: 1rem;
              text-align: center;
              font-size: 1.3rem;
              overflow: hidden;

              @media (max-width: 800px) {
                & {
                  width: 25%;
                  float: left;
                }
              }

              &:hover {
                background-color: var(--color10);
                border-radius: 0.5rem;
                box-shadow: 0.3rem 0.2rem 0.5rem var(--color5);
              }

              &:hover span {
                color: var(--text-hover-color);
              }

              &:hover .logo {
                box-shadow: none;
              }

              &:hover .list_logo {
                top: 0.3rem;
                box-shadow: 0.3rem 0.3rem 0.5rem transparent;
              }

              .list_logo {
                position: relative;
                top: 0;
                margin: 0.5rem auto;
                width: 80%;
                padding-top: 80%;
                transition: top 0.1s, box-shadow 0.1s;
                border-radius: 0.5rem;
                box-shadow: 0.3rem 0.3rem 0.5rem var(--color5);

                .logo {
                  position: absolute;
                  top: 0;
                  left: 0;
                  background-image: url('../../images/img/loading.svg');
                  background-repeat: no-repeat;
                  background-size: 40%;
                  background-position: center;
                  width: 100%;
                  height: 100%;
                  border-radius: 0.5rem;
                  &.load {
                    background-color: transparent;
                    background-size: cover;
                  }
                }
              }

              span {
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                height: 2.8rem;
                line-height: 2.8rem;
                &:hover {
                  text-decoration: var(--text-hover-decoration);
                }
              }
            }

            // 添加歌单
            .add_song_list {
              width: 20%;
              float: left;
              margin-bottom: 1rem;
              text-align: center;
              opacity: 0.3;

              @media (max-width: 800px) {
                & {
                  width: 25%;
                }
              }

              &:hover {
                opacity: 1;
              }

              img {
                margin: 0.5rem auto;
                width: 80%;
                vertical-align: bottom;
              }
            }
          }
        }

        // 歌曲列表
        .list_items_wrap {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          transform: translateX(100%);
          overflow-y: auto;
          transition: transform var(--speed-duration) var(--speed-timing);
          padding-top: 0.5rem;

          &.open {
            transform: none;
          }

          .items_box {
            // 批量操作按钮框
            .check_all_menu_wrap {
              display: none;
              position: fixed;
              right: 1rem;
              top: 50%;
              transform: translateY(-50%);
              z-index: 10;
              font-size: 1.5rem;
              max-height: 80%;
              overflow-y: auto;
              padding: 0.5rem;

              div {
                line-height: 3rem;
                box-shadow: 0 0 0.5rem var(--color5);
                background-color: var(--bg-color-o3);
                padding: 0.5rem;
                margin-bottom: 0.8rem;
                border-radius: 0.5rem;
                text-align: center;

                &:hover {
                  background-color: var(--bg-color-o4);
                  color: var(--text-hover-color);
                }
              }
            }

            // 顶部歌单信息框
            .items_list_top_wrap {
              height: 10rem;
              margin-bottom: 1rem;
              display: flex;
              overflow: hidden;

              .song_list_cover {
                flex: none;
                width: 10rem;
                height: 10rem;
                margin-left: 0.5rem;

                .logo {
                  background-image: url('../../images/img/loading.svg');
                  background-repeat: no-repeat;
                  background-size: 40%;
                  background-position: center;
                  width: 10rem;
                  height: 100%;
                  border-radius: 0.5rem;
                  &.load {
                    background-color: transparent;
                    background-size: cover;
                  }
                }
              }

              .song_list_info {
                flex: auto;
                padding: 0 2rem;
                overflow: hidden;
                display: flex;
                justify-content: center;
                flex-flow: column;

                // 歌单名
                .song_list_name {
                  flex: none;
                  font-size: 2.2rem;
                  line-height: 4rem;
                  height: 4rem;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  color: var(--icon-color);
                }

                // 描叙
                .song_list_des {
                  flex: auto;
                  overflow-y: auto;
                  line-height: 2rem;
                  font-size: 1.5rem;
                  color: var(--color4);
                  word-break: break-all;
                  overscroll-behavior: contain;
                  -ms-scroll-chaining: contain;
                }
              }
            }
            .items_list_top_menu_fill {
              height: 0;
              width: 100%;
              &.active {
                height: 4rem;
              }
            }
            // 顶部操作按钮框
            .items_list_top_menu {
              height: 4rem;
              width: 100%;
              display: flex;
              padding: 0 0.3rem;
              overflow: hidden;

              &.sct {
                position: fixed;
                top: 4rem;
                right: 0px;
                z-index: 10;
                background-color: var(--color9);
              }

              // 播放列表按钮
              .play_list_btn {
                flex: none;
                margin: 0 0.5rem;
                height: 4rem;
                line-height: 4rem;
                color: var(--icon-color);
                font-size: 2rem;

                &:hover {
                  transform: scale(1.2);
                }
              }

              // 列表歌曲数
              .list_total_num {
                flex: auto;
                height: 4rem;
                line-height: 4rem;
                font-size: 1.5rem;
                overflow: hidden;

                span {
                  margin-left: 0.5rem;
                }
              }

              // 右部操作按钮
              .checked_song_btn,
              .upload_song_btn,
              .share_song_list_btn,
              .random_song_list_btn,
              .show_mv_list_btn,
              .edit_song_list_btn,
              .sort_songs {
                flex: none;
                height: 4rem;
                width: 4rem;
                text-align: center;
                line-height: 4rem;
                color: var(--color4);

                i {
                  font-size: 2.5rem;
                }

                &:hover {
                  color: var(--text-hover-color);
                  transform: scale(1.2);
                }
              }

              .share_song_list_btn i,
              .edit_song_list_btn i {
                font-size: 2.2rem;
              }
            }

            // 歌曲项
            .song_item {
              height: 6rem;
              position: relative;
              display: flex;
              flex-flow: row;
              margin: 0.6rem 0.2rem;
              overflow: hidden;

              &:hover {
                color: var(--text-hover-color);
                background-color: var(--bg-color-o1);
                .song_logo_box {
                  transform: scale(1.2);
                }
              }

              &.active {
                color: var(--text-hover-color);
                border-radius: 0.5rem;
                background-color: var(--bg-color-o2);
              }
              .downloaded {
                position: absolute;
                top: 0;
                left: 0;
                font-size: 1.6rem;
                pointer-events: none;
                opacity: 0.8;
                color: var(--message-success-color);
                z-index: 6;
              }
              // 选中状态
              .check_state {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 0.5rem;
                width: 100%;
                height: 100%;
                z-index: 5;
              }

              // 操作按钮
              .play_mv,
              .like_hear,
              .add_song_playing_btn,
              .set_song_btn {
                flex: none;
                color: var(--color4);
                line-height: 6rem;
                text-align: center;
                width: 4rem;
                font-size: 2rem;
              }

              .like_hear {
                font-size: 1.8rem;
                color: var(--color4);
                &:hover {
                  transform: scale(1.2);
                }
              }

              .like_hear.active {
                color: #fd4747;
              }

              .play_mv:hover,
              .add_song_playing_btn:hover,
              .set_song_btn:hover {
                color: var(--text-hover-color);
                transform: scale(1.2);
              }

              .song_logo_box {
                position: relative;
                flex: none;
                width: 5rem;
                height: 5rem;
                margin: 0.5rem;
                overflow: hidden;
                border-radius: 0.5rem;

                .logo {
                  background-image: url('../../images/img/loading.svg');
                  background-repeat: no-repeat;
                  background-size: 50%;
                  background-position: center;
                  width: 100%;
                  height: 100%;
                  &.load {
                    background-color: transparent;
                    background-size: cover;
                  }
                }
                .play_gif {
                  width: 100%;
                  height: 100%;
                  background-image: url(../../images/img/wave.gif);
                  background-repeat: no-repeat;
                  background-position: bottom 0.6rem left 0.6rem;
                  background-size: 1.4rem;
                  background-color: #00000060;
                  pointer-events: none;
                  top: 0;
                  display: none;
                  left: 0;
                  position: absolute;

                  &.show {
                    display: block;
                  }
                }
              }

              .song_info_wrap {
                flex: auto;
                width: 0;
                height: 6rem;
                padding: 0.5rem;
                overflow: hidden;

                span {
                  display: block;
                  width: 100%;
                  line-height: 2.5rem;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                .song_name {
                  font-size: 1.6rem;
                }

                .artist_name {
                  font-size: 1.2rem;
                  color: var(--color4);

                  .viptu {
                    color: rgb(167, 164, 37);
                    font-size: 1.3rem;
                    margin-right: 0.4rem;
                  }

                  .artist_name_text {
                    &:hover {
                      text-decoration: var(--text-hover-decoration);
                      text-decoration-color: var(--color);
                    }
                  }
                }
              }
            }

            .song_list_paging {
              button {
                background-color: transparent;
                border: none;
                color: var(--color2);
              }
            }
          }

          .position_btn {
            display: none;
            width: 3rem;
            position: fixed;
            bottom: 10rem;
            right: 1.5rem;
            z-index: 9;
            border-radius: 1rem;
            box-shadow: 0 0 0.5rem var(--color5);
            background-color: var(--bg-color-o3);
            opacity: 0.9;
            overflow: hidden;

            &:hover {
              background-color: var(--bg-color-o5);
            }
            div {
              width: 3rem;
              height: 3rem;
              text-align: center;
              line-height: 3rem;
              font-size: 1.5rem;

              &:hover {
                color: var(--text-hover-color);
                transform: scale(1.2);
              }
            }

            .get_location {
              font-size: 1.7rem;
            }
          }
        }
      }

      .music_foot_box {
        background-color: var(--color9);
        display: flex;
        flex: none;
        flex-direction: row;
        height: 5.1rem;
        border-top: 1px solid var(--color8);
        overflow: hidden;
        width: 100%;

        .playing_song_logo {
          width: 5rem;
          flex: none;
          height: 5rem;
          position: relative;

          .logo_img {
            width: 4.6rem;
            height: 4.6rem;
            margin: 0.2rem;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../../images/img/loading.svg');
            background-size: 50%;
            border-radius: 50%;
            &.load {
              box-shadow: 0 0 0.5rem var(--color5);
              background-size: cover;
            }
          }
        }

        .playing_song_info {
          flex: auto;
          margin: 0 auto;
          font-size: 1.6rem;
          height: 5rem;
          line-height: 5rem;
          overflow: hidden;
          // animation: fcolor 18s infinite linear alternate;
          overflow: hidden;
          margin-left: 1rem;

          div {
            float: left;
            white-space: nowrap;
          }
        }

        @keyframes fcolor {
          0% {
            color: #000;
          }

          20% {
            color: #55aaff;
          }

          40% {
            color: #ff55ff;
          }

          60% {
            color: #55ff00;
          }

          80% {
            color: #aa00ff;
          }

          100% {
            color: #ff007f;
          }
        }

        .right_btns {
          flex: none;
          width: 15rem;
          height: 5rem;

          div {
            float: left;
            width: 5rem;
            text-align: center;
            font-size: 3rem;
            line-height: 5rem;

            &:hover {
              color: var(--text-hover-color);
              transform: scale(1.2);
            }
          }

          @keyframes fontcolor {
            0% {
              color: #000000;
            }

            100% {
              color: #fff;
            }
          }

          .playing_list_btn {
            font-size: 2.4rem;
            &.run {
              animation: tada 1s;
              color: var(--text-hover-color);
            }
          }
        }
      }

      // 歌词盒子
      .music_lrc_wrap {
        position: absolute;
        background-color: var(--color10);
        top: 4rem;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 11;
        transform: translateY(100%);
        transition: transform var(--speed-duration) var(--speed-timing);
        padding-bottom: 4rem;

        &.active {
          transform: none;
        }

        .lrc_box {
          margin: 0 auto;
          max-width: var(--max-width);
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100%;

          .lrc_bg {
            position: absolute;
            top: 0;
            left: 0;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            opacity: 0.3;
            z-index: -1;
            transition: opacity 0.5s ease-in-out;
            &::after {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              content: '';
              z-index: -1;
              backdrop-filter: blur(10px);
              -webkit-backdrop-filter: blur(10px);
              transition: backdrop-filter 0.5s ease-in-out,
                -webkit-backdrop-filter 0.5s ease-in-out;
            }
            &.open {
              opacity: 0.8;
              &::after {
                backdrop-filter: blur(0);
                -webkit-backdrop-filter: blur(0);
              }
            }

            &.lrcbgss {
              opacity: 0;
              transition: opacity 0s;
            }
          }

          .lrc_head {
            display: flex;
            flex-flow: row;
            flex: none;
            height: 6rem;

            .remote_play,
            .close {
              flex: none;
              width: 6rem;
              height: 6rem;
              line-height: 6rem;
              text-align: center;
              font-size: 2rem;
            }

            .close:hover {
              color: var(--text-hover-color);
              transform: scale(1.2);
            }

            .remote_play {
              font-size: 3rem;
              color: var(--icon-color);

              &:hover {
                transform: scale(1.2);
                color: var(--text-hover-color);
              }
              &.red {
                color: var(--btn-danger-color);
                animation: tada 2s infinite;
              }
            }

            .song_info_box {
              flex: auto;
              width: 0;

              .song_name {
                height: 4rem;
                padding-top: 1.5rem;
                font-size: 2rem;
                overflow: hidden;

                div {
                  white-space: nowrap;
                  float: left;
                }
              }

              .artist_name {
                height: 2rem;
                font-size: 1.3rem;
                color: var(--color4);
                overflow: hidden;

                .artist_name_text {
                  white-space: nowrap;
                  float: left;

                  &:hover {
                    text-decoration: var(--text-hover-decoration);
                    text-decoration-color: var(--color);
                  }
                }
              }
            }
          }

          // 歌词框
          .lrc_list_wrap {
            position: relative;
            width: 100%;
            flex: auto;
            overflow: hidden;
            -webkit-mask: linear-gradient(
              180deg,
              hsla(0, 0%, 100%, 0),
              hsla(0, 0%, 100%, 0.6) 15%,
              #fff 25%,
              #fff 75%,
              hsla(0, 0%, 100%, 0.6) 85%,
              hsla(0, 0%, 100%, 0)
            );
            mask: linear-gradient(
              180deg,
              hsla(0, 0%, 100%, 0),
              hsla(0, 0%, 100%, 0.6) 15%,
              #fff 25%,
              #fff 75%,
              hsla(0, 0%, 100%, 0.6) 85%,
              hsla(0, 0%, 100%, 0)
            );

            .lrc_items {
              width: 100%;
              padding: 0 2rem;
              overflow: hidden;
              transform: translateY(0);

              div {
                padding-bottom: 0.7em;

                &.active .elrc {
                  color: var(--lrc-active-color);
                  letter-spacing: 1px;
                }

                p {
                  white-space: pre-wrap;
                  word-break: break-word;
                  line-height: 1.5;
                }
                .elrc {
                  transition: letter-spacing 0.3s ease-in-out;
                }
                .lrcfy {
                  font-size: 0.7em;
                }
              }
            }
          }

          // 设置按钮
          .lrc_menu_wrap {
            flex: none;
            height: 6rem;

            .collect_song_btn {
              width: 3rem;
              height: 3rem;
              line-height: 3rem;
              text-align: center;
              font-size: 2.4rem;
              color: var(--color4);
              margin-left: 2rem;
              float: left;
              &:hover {
                transform: scale(1.2);
              }
              &.active {
                color: #fd4747;
              }
            }

            .right_btns {
              float: right;
              margin-right: 1.5rem;

              div {
                height: 3rem;
                line-height: 3rem;
                margin: 0 0.5rem;
                font-size: 2rem;
                padding: 0 0.5rem;
                text-align: center;
                float: left;

                &:hover {
                  color: var(--text-hover-color);
                  transform: scale(1.2);
                }
              }

              .lrc_translate_btn,
              .play_mv_btn {
                display: none;
              }
            }
          }

          .lrc_foot_wrap {
            display: none;
            width: 100%;
            height: 12rem;
            flex: none;
            background-color: transparent;

            .progress_bar {
              width: 100%;
              height: 2rem;
              display: flex;
              align-items: center;
              justify-content: center;

              .current_time,
              .total_time {
                font-size: 1.6rem;
                line-height: 1rem;
                flex: none;
                padding: 0 1rem;
              }

              .probox {
                flex: auto;
                height: 1rem;
                display: flex;
                align-items: center;

                &:hover .pro1 {
                  height: 0.6rem;
                }

                &:hover .pro1 .pro2 .dolt {
                  display: block;
                  margin-top: -0.2rem;
                  width: 0.6rem;
                  height: 1rem;
                }

                .pro1 {
                  position: relative;
                  width: 100%;
                  height: 0.2rem;
                  background-color: var(--color5);

                  &.open {
                    height: 0.6rem;
                  }

                  .pro2 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0;
                    height: 100%;
                    background-image: linear-gradient(to right, orange, red);

                    .dolt {
                      display: none;
                      float: right;
                      transform: translateX(50%);
                      margin-top: -0.3rem;
                      width: 0.4rem;
                      height: 0.8rem;
                      background-color: var(--color);

                      &:open {
                        margin-top: -0.2rem;
                        width: 0.6rem;
                        height: 1rem;
                      }

                      @keyframes bgcolor {
                        0% {
                          background-color: #000000;
                        }

                        100% {
                          background-color: #fff;
                        }
                      }
                    }
                  }
                }
              }
            }

            .foot_btn_wrap {
              width: 80%;
              max-width: 50rem;
              height: 10rem;
              line-height: 5rem;
              padding: 2.5rem 0;
              display: flex;
              flex-direction: row;
              margin: 0 auto;
              justify-content: space-around;
              border-radius: 0 0 0.5rem 0.5rem;

              .play_btn,
              .playing_list_btn,
              .random_play_btn,
              .prev_play_btn,
              .next_play {
                font-size: 2.5rem;

                &:hover {
                  color: var(--text-hover-color);
                  transform: scale(1.2);
                }
              }

              .play_btn {
                font-size: 4rem;
              }

              .playing_list_btn {
                font-size: 2.2rem;
              }

              @keyframes fontcolor {
                0% {
                  color: #000000;
                }

                100% {
                  color: #fff;
                }
              }
            }
          }
        }
      }

      // 搜索列表
      .search_music_wrap {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 4rem;
        right: 0;
        padding-bottom: 4rem;
        background-color: var(--bg-color-o4);
        z-index: 13;

        .s_music_list_box {
          width: 100%;
          height: 80%;
          margin: 0 auto;
          max-width: var(--max-width);
          border-radius: 0 0 0.5rem 0.5rem;
          background-color: var(--color8);
          ol,
          li,
          ul {
            list-style: none;
          }
          ul {
            text-align: left;
            height: 100%;
            border-radius: 0 0 0.5rem 0.5rem;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 4rem;

            .song_item {
              position: relative;
              display: flex;
              width: 100%;
              height: 6rem;
              &:not(:first-of-type) {
                border-top: 1px solid var(--color9);
              }

              &:hover {
                background-color: var(--bg-color-o1);
                color: var(--text-hover-color);
                .logo_wrap {
                  transform: scale(1.2);
                }
              }
              .downloaded {
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;
                opacity: 0.8;
                font-size: 1.6rem;
                color: var(--message-success-color);
                z-index: 6;
              }
              .play_mv,
              .like_hear,
              .set_menu,
              .add_palying_list {
                flex: none;
                width: 4rem;
                line-height: 6rem;
                text-align: center;
                font-size: 2rem;
                color: var(--color4);
              }

              .like_hear {
                font-size: 1.8rem;
                color: var(--color4);
                &:hover {
                  transform: scale(1.2);
                }
              }

              .like_hear.active {
                color: #fd4747;
              }

              .play_mv:hover,
              .add_palying_list:hover,
              .set_menu:hover {
                color: var(--text-hover-color);
                transform: scale(1.2);
              }

              .logo_wrap {
                position: relative;
                flex: none;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 6rem;
                height: 6rem;
                overflow: hidden;

                .logo {
                  width: 80%;
                  height: 80%;
                  background-image: url('../../images/img/loading.svg');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 50%;
                  border-radius: 50%;
                  &.load {
                    background-color: transparent;
                    background-size: cover;
                  }
                }
              }

              .song_info_wrap {
                flex: auto;
                width: 0;
                padding: 0.5rem;

                .song_name,
                .artist_name {
                  line-height: 2.5rem;
                  height: 2.5rem;
                  display: block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  background-color: transparent;
                }

                .song_name {
                  font-size: 1.6rem;
                }

                .artist_name {
                  font-size: 1.2rem;
                  color: var(--color4);
                }
              }
            }
            .playing_list_paging {
              button {
                background-color: transparent;
                border: none;
                color: var(--color2);
              }
            }
          }
        }
      }

      // 当前播放列表
      .playing_list_mask {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: var(--bg-color-o4);
        z-index: 12;

        .p_music_list_wrap {
          display: none;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 70%;
          max-width: var(--max-width);
          overflow: hidden;
          border-radius: 0.5rem 0.5rem 0 0;
          padding: 0 0.2rem;
          background-color: var(--color8);

          .p_head {
            width: 100%;
            height: 4rem;
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
            .left {
              flex: auto;
              line-height: 4rem;
              margin-left: 0.5rem;
            }

            .share_playing_list,
            .check_btn,
            .clear_playing_list {
              flex: none;
              line-height: 4rem;
              text-align: center;
              height: 4rem;
              width: 4rem;
              font-size: 2rem;

              &:hover {
                color: var(--text-hover-color);
                transform: scale(1.2);
              }
            }

            .share_playing_list {
              font-size: 1.8rem;
            }
          }

          .p_foot {
            position: relative;
            width: 100%;
            height: 100%;
            padding-bottom: 10rem;
            overflow-y: auto;
            overflow-x: hidden;

            .song_item {
              height: 6rem;
              display: flex;
              margin: 0.6rem 0.2rem;
              position: relative;

              &:hover {
                background-color: var(--bg-color-o1);
                color: var(--text-hover-color);
                .logo_wrap {
                  transform: scale(1.2);
                }
              }

              &.active {
                color: var(--text-hover-color);
                border-radius: 0.5rem;
                background-color: var(--bg-color-o2);
              }
              .check_state {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 0.5rem;
                width: 100%;
                height: 100%;
                z-index: 5;
              }
              .downloaded {
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;
                font-size: 1.6rem;
                opacity: 0.8;
                color: var(--message-success-color);
                z-index: 6;
              }
              .play_mv,
              .like_hear,
              .del {
                flex: none;
                text-align: center;
                line-height: 6rem;
                width: 4rem;
                font-size: 2rem;
                &:hover {
                  transform: scale(1.2);
                }
              }

              .like_hear {
                font-size: 1.8rem;
                color: var(--color4);
              }

              .like_hear.active {
                color: #fd4747;
              }

              .logo_wrap {
                position: relative;
                flex: none;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 6rem;
                height: 6rem;
                overflow: hidden;

                .logo {
                  width: 80%;
                  height: 80%;
                  border-radius: 50%;
                  background-image: url('../../images/img/loading.svg');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 50%;
                  overflow: hidden;
                  position: relative;
                  &.load {
                    background-color: transparent;
                    background-size: cover;
                  }
                  .play_gif {
                    width: 100%;
                    height: 100%;
                    background-image: url(../../images/img/wave.gif);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 1.4rem;
                    background-color: #00000060;
                    pointer-events: none;
                    top: 0;
                    display: none;
                    left: 0;
                    position: absolute;

                    &.show {
                      display: block;
                    }
                  }
                }
              }

              .play_mv,
              .del {
                color: var(--color4);

                &:hover {
                  color: var(--text-hover-color);
                }
              }

              .song_info_wrap {
                flex: auto;
                width: 0;
                padding: 0.5rem;

                span {
                  line-height: 2.5rem;
                  display: block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  background-color: transparent;
                }

                .song_name {
                  font-size: 1.6rem;
                }

                .artist_name {
                  color: var(--color4);
                  font-size: 1.2rem;

                  i {
                    &:hover {
                      text-decoration: var(--text-hover-decoration);
                      text-decoration-color: var(--color);
                    }
                  }
                }
              }
            }

            .playing_list_paging {
              button {
                background-color: transparent;
                border: none;
                color: var(--color2);
              }
            }
          }
          .p_foot_menu {
            display: none;
            position: absolute;
            left: 0;
            flex: none;
            width: 100%;
            bottom: 0;
            padding: 0.5rem 0;
            background-color: var(--bg-color-o2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 5;
            .flex_wrap {
              width: 100%;
              display: flex;
              align-items: center;
              flex-flow: row wrap;
              div {
                flex: none;
                font-size: 2rem;
                margin: 0.5rem 0.5rem 0.5rem 1rem;
                text-align: center;
                width: 2.5rem;
                height: 2.5rem;
                line-height: 2.5rem;
                &:hover {
                  transform: scale(1.2);
                  color: var(--text-hover-color);
                }
              }

              button {
                flex: none;
              }
            }
          }
        }
      }
    }
  }

  // 歌词编辑
  .edit_lrc_wrap {
    max-height: 100%;
    display: none;
    flex-flow: column;
    position: fixed;
    border-radius: 0.4rem;
    background-color: var(--color9);
    box-shadow: 0 0 0.5rem var(--color5);
    padding: 0.2rem;

    .e_head_btns {
      padding: 0 0.5rem;
      display: flex;
      height: 4.1rem;
      align-items: center;
      border-bottom: 1px solid var(--color8);
      .top,
      .close,
      .save {
        flex: none;
        width: 3rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        font-size: 2rem;
        margin: 0 0.5rem;

        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }
      @media (max-width: 800px) {
        .top {
          display: none;
        }
      }
      .song_info_text {
        flex: auto;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        font-size: 2rem;
        margin: 0 0.5rem;
        overflow: hidden;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;

        p {
          white-space: nowrap;
          float: left;
        }
      }
    }

    textarea {
      flex: auto;
      width: 100%;
      height: 100%;
      outline: none;
      border: none;
      resize: none;
      padding: 1rem;
      line-height: 3rem;
      font-size: 1.8rem;
      overflow-y: auto;
      background-color: var(--color10);
    }
  }

  // MV盒子
  .music_mv_wrap {
    max-height: 100%;
    display: none;
    flex-flow: column;
    position: fixed;
    background-color: var(--color9);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0 0.5rem var(--color5);
    padding: 0.2rem;

    .m_head_btns {
      flex: none;
      display: flex;
      width: 100%;
      height: 4.1rem;
      border-bottom: 1px solid var(--color8);
      align-items: center;
      padding: 0 0.5rem;

      .m_top_space {
        flex: auto;
        overflow: hidden;
        line-height: 4rem;
        height: 4rem;
        margin: 0 0.5rem;

        p {
          white-space: nowrap;
          float: left;
        }
      }
      .top,
      .m_close {
        flex: none;
        margin: 0 0.5rem;
        width: 3rem;
        line-height: 4rem;
        text-align: center;
        font-size: 2rem;

        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }
      @media (max-width: 800px) {
        .top {
          display: none;
        }
      }
    }

    .video_box {
      flex: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color10);
      overflow: hidden;
      video {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 待办
  .todo_box {
    max-height: 100%;
    display: none;
    flex-flow: column;
    position: fixed;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color9);
    box-shadow: 0 0 0.5rem var(--color5);
    padding: 0.2rem;

    .t_head_btns {
      flex: none;
      width: 100%;
      height: 4.1rem;
      border-bottom: 1px solid var(--color8);
      padding: 0 0.5rem;
      display: flex;
      align-items: center;

      div {
        margin: 0 0.5rem;
        font-size: 2rem;
      }
      .t_space {
        flex: auto;
        height: 4rem;
        line-height: 4rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .top,
      .t_refresh_btn,
      .t_close_btn {
        flex: none;
        width: 3rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;

        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }
      @media (max-width: 800px) {
        .top {
          display: none;
        }
      }
    }

    .todo_list_wrap {
      flex: auto;
      padding: 0.5rem;
      overflow-y: auto;
      background-color: var(--color10);
      width: 100%;

      .todo_list {
        width: 100%;
        margin: 0 auto;
        max-width: var(--max-width);
        ol,
        li,
        ul {
          list-style: none;
        }
        ul {
          width: 100%;
          display: flex;
          flex-flow: row;
          font-size: 1.8rem;
          overflow: hidden;
          margin: 0.5rem 0;
          align-items: center;

          &:not(:first-of-type) {
            border-top: 1px solid var(--color9);
          }

          &:hover {
            background-color: var(--color9);
          }

          .todo_text {
            flex: auto;
            line-height: 1.5;
            padding: 0.5rem;
            .text {
              white-space: pre-wrap;
              word-break: break-all;
              overflow-y: auto;
              max-height: 19rem;

              &.del {
                text-decoration: line-through;
                color: var(--color4);
              }
            }
            .time {
              font-size: 0.7em;
              color: var(--color6);
              margin-top: 0.5rem;
            }
          }

          .todo_state,
          .set_btn {
            flex: none;
            width: 4rem;
            line-height: 4rem;
            text-align: center;
            font-size: 2rem;

            &:hover {
              color: var(--text-hover-color);
              transform: scale(1.2);
            }
          }
        }
        .todo_paging_box {
          padding: 2rem 0;
        }
      }
    }
  }
  // 倒计时
  .count_box {
    max-height: 100%;
    display: none;
    flex-flow: column;
    position: fixed;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color9);
    box-shadow: 0 0 0.5rem var(--color5);
    padding: 0.2rem;

    .c_head_btns {
      flex: none;
      width: 100%;
      height: 4.1rem;
      border-bottom: 1px solid var(--color8);
      padding: 0 0.5rem;
      display: flex;
      align-items: center;

      div {
        margin: 0 0.5rem;
        font-size: 2rem;
      }
      .c_space {
        flex: auto;
        height: 4rem;
        line-height: 4rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .top,
      .c_refresh_btn,
      .c_close_btn {
        flex: none;
        width: 3rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;

        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }
      @media (max-width: 800px) {
        .top {
          display: none;
        }
      }
    }
    .count_list_wrap {
      flex: auto;
      padding: 1rem;
      overflow-y: auto;
      background-color: var(--color10);
      width: 100%;

      .count_list {
        width: 100%;
        margin: 0 auto;
        max-width: var(--max-width);
        .item_box {
          padding: 1rem 0;
          &:not(:nth-of-type(2)) {
            border-top: 1px solid var(--color9);
          }
          &:hover .icon {
            transform: scale(1.2);
          }
          .title {
            display: flex;
            align-items: center;
            .top_btn,
            .set_btn,
            .icon {
              flex: none;
              color: var(--icon-color);
              width: 3rem;
              height: 3rem;
              line-height: 3rem;
              text-align: center;
              font-size: 1.6rem;
            }
            .icon:hover {
              color: var(--text-hover-color);
            }
            .text {
              line-height: 1.5;
              word-break: break-all;
              font-size: 2rem;
              flex: auto;
              overflow-y: auto;
              max-height: 19rem;
            }
            .top_btn {
              color: var(--color5);
            }
            .set_btn {
              color: var(--color3);
              &:hover {
                color: var(--text-hover-color);
                transform: scale(1.2);
              }
            }
          }
          .info {
            font-size: 1.4rem;
            line-height: 1.5;
          }
          &.close {
            .title .text {
              text-decoration: line-through;
              color: var(--color4);
            }
          }
          .pro {
            background-color: var(--color9);
            height: 2rem;
            line-height: 2rem;
            border-radius: 4px;
            overflow: hidden;
            width: 95%;
            margin: 1rem 0;
            border: 1px solid var(--color8);
            font-size: 1.4rem;
            .bar {
              width: 1.5em;
              overflow: hidden;
              max-width: 100%;
              min-width: 1.5em;
              transition: width 0.3s ease-in-out;
              background-color: var(--color8);
            }
            .num {
              float: right;
            }
          }
        }

        .count_paging_box {
          padding: 2rem 0;
        }
      }
    }
  }

  // iframe窗口
  .iframe_warp {
    max-height: 100%;
    display: none;
    flex-flow: column;
    position: fixed;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color9);
    box-shadow: 0 0 0.5rem var(--color5);
    padding: 0.2rem;

    .i_head_btns {
      flex: none;
      width: 100%;
      height: 4.1rem;
      border-bottom: 1px solid var(--color8);
      padding: 0 0.5rem;
      display: flex;
      align-items: center;

      div {
        margin: 0 0.5rem;
        font-size: 2rem;
        flex: none;
        width: 3rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;

        &:hover {
          color: var(--text-hover-color);
        }
      }
      .iconfont:hover {
        transform: scale(1.2);
      }
      @media (max-width: 800px) {
        .i_top {
          display: none;
        }
      }
      .i_title_text {
        flex: auto;
        height: 4rem;
        overflow: hidden;
        line-height: 4rem;
        width: 0;
        white-space: nowrap;
        .scroll_text {
          float: left;
          color: var(--color1);
          font-size: 1.8rem;
        }
      }

      .i_to_max_btn {
        font-size: 1.7rem;

        @media (max-width: 800px) {
          & {
            display: none;
          }
        }
      }
    }
    .con {
      position: relative;
      flex: auto;
      width: 100%;
      height: 100%;
      background-color: var(--color10);

      iframe {
        width: 100%;
        height: 100%;
      }
      .iframe_mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 3;
      }
      .iframe_load {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../../images/img/loading.svg);
        background-size: 10rem 10rem;
        background-position: center;
        background-repeat: no-repeat;
        background-color: var(--color10);
        transition: opacity 0.3s ease-in-out;
        z-index: 2;
      }
    }
  }
}
html.head_btn_to_right {
  .chat_room_wrap .c_head_btns {
    flex-flow: row-reverse;
  }
  .music_player_box {
    .head_wrap {
      flex-flow: row-reverse;
    }
  }
  .edit_lrc_wrap {
    .e_head_btns {
      flex-flow: row-reverse;
    }
  }
  .music_mv_wrap {
    .m_head_btns {
      flex-flow: row-reverse;
    }
  }
  .todo_box {
    .t_head_btns {
      flex-flow: row-reverse;
    }
  }
  .count_box {
    .c_head_btns {
      flex-flow: row-reverse;
    }
  }
  .mini_lrc_wrap {
    .close {
      left: auto !important;
      right: -1rem;
    }
    .top {
      left: auto !important;
      right: 1.6rem;
    }
  }
  .user_info_wrap {
    .u_close_btn {
      left: auto !important;
      right: 1rem;
    }
    .top {
      left: auto !important;
      right: 4rem;
    }
  }
  .sys_info_wrap {
    .c_close_btn {
      left: auto !important;
      right: 1rem;
    }
    .top {
      left: auto !important;
      right: 4rem;
    }
  }
  .all_bg_wrap {
    .upload_bg {
      left: auto !important;
      right: 6rem;
    }
    .b_close_btn {
      left: auto !important;
      right: 2rem;
    }
  }
  .iframe_warp {
    .i_head_btns {
      flex-flow: row-reverse;
    }
  }
}
